<!---->
<template>
    <div class="page_uploadPicture">
        <div class="m-credentials-img">
            <form id="uploadForm" enctype="multipart/form-data">
                <input id="file" name="file" @change="handleFiles" type="file" capture="camera" accept="image/*"/>
                <img src="../../static/images/uploadImg2.png" class="img_bc" v-show="!isUploadImg" alt=""/>
                <div id="previewImage" class="previewImage"></div>
                <img src="../../static/images/icon-add.png"
                     @click="deleteImg" v-show="isUploadImg" alt="" class="img_close"/>
            </form>
        </div>
    </div>
</template>

<script>

    export default {
        name: "uploadPicture",
        components: {},
        props: {
            url: {    // 请求上传图片的路径
                type: String,
                default: '/api/common/upload',
            }
        },
        data() {
            return {
                isUploadImg: false,
                categoryList: [],
            }
        },

        created() {

        },
        watch: {},
        methods: {
            handleFiles(e) {
                let form = new FormData();
                if ($("#file")[0].files[0]) {
                    form.append("file[]", $("#file")[0].files[0]);
                }

                this.isUploadImg = true;

                this.categoryList = this.$tools.uploadFiles(this.url, form)

                $("#previewImage").show();

                let x = this.$tools.previewImg(e, "previewImage", "uploadForm", "file", 210);
                x;

                if (x === "delete") {
                    this.$tools.deleteImg("#file", "#previewImage");
                }
            },

            deleteImg() {
                this.isUploadImg = false;
                this.$tools.deleteImg('#file', '#previewImage')
                window.sessionStorage.setItem('uploadImg', '')
            },
        },
    };
</script>

<style lang="less" rel="stylesheet/less" type="text/css">
    #uploadForm {
        height: 210px;
        position: relative;
    }

    #previewImage {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 100;
    }

    #file {
        position: absolute;
        z-index: 99;
        opacity: 0;
        width: 100% !important;
        height: 100% !important;
    }

    .img_bc {
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
    }

    .img_close {
        position: absolute;
        z-index: 103;
        width: 23px;
        height: 23px;
        top: -10px;
        right: -10px;
        transform: rotate(130deg);
    }

    .m-credentials-img {
        margin-bottom: 10px;
    }
</style>
